import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {getQueryString} from '../utils/util';
import { Link } from 'react-router-dom';
import { Button, Checkbox, TextareaItem, Toast } from 'antd-mobile';

import 'antd-mobile/lib/button/style/index.css';
import 'antd-mobile/lib/checkbox/style/index.css';
import 'antd-mobile/lib/textarea-item/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import '../static/styles/enroll.css';
import { createForm } from 'rc-form';

import LxrItem from '../components/lxrItem';

import { get, post } from '../api/getData';

const CheckboxItem = Checkbox.CheckboxItem;
let cacheLxr = [];

class Enroll extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lxr:[],
            hasChildren:false,
            mzsm:false,
            remark:''
        }

        cacheLxr = window.localStorage.getItem('lxr-select');
        if(!cacheLxr){
            cacheLxr = [];
        }else{
            cacheLxr = JSON.parse(cacheLxr);
            this.state.lxr = cacheLxr;
        }

    }

    componentDidMount() {
        document.title = '活动报名';
    }

    checkboxChange(hasChildren){
        this.setState({
            hasChildren
        });
    }

    mzsmChange(){
        this.setState({
            mzsm: !this.state.mzsm
        });
    }

    xzlxr(){
        let activityId = getQueryString('id');
        window.location.href = '/lxr?activity_id=' + activityId;
    }

    submit(){
        let formData = new FormData();
        let __this = this;
        let activityId = getQueryString('id');
        let personalIds = [];
        formData.append('activity_id', activityId);
        formData.append('has_child', this.state.hasChildren?1:0);
        formData.append('remark', this.state.remark);

        cacheLxr = window.localStorage.getItem('lxr-select');
        if(!cacheLxr){
            cacheLxr = [];
        }else{
            cacheLxr = JSON.parse(cacheLxr);
            for (var i = 0; i < cacheLxr.length; i++) {
                personalIds.push(cacheLxr[i].id);
            }
        }
        formData.append('personal_ids', personalIds);

        post('/api/activity/enroll', formData, function(error, data){
            if(error === null){
                Toast.success('报名成功', 1);
                window.localStorage.setItem('lxr-select', []);
            }else{
                Toast.fail(error, 1);
            }
        })
    }

    checkRemarkField(){
        this.setState({
            remark: this.remark.value
        });
    }

    render() {
        const data = [
            { value: 1, label: '有小孩' },
            { value: 0, label: '没有小孩' },
        ];
        return (<div style={{'background':'#E2E2E2'}}>
            <div className='enroll-zysx'>
                <div className='enroll-title'>注意事项</div>
                <div className='enroll-content'>
                    <div className='enroll-content-item'>
                        <p className='enroll-content-num'>1.</p><p>报名前请认真阅读帖子，确认您已了解活动强度，难度，风险。认可活动原则</p>
                    </div>
                    <div className='enroll-content-item'>
                        <p className='enroll-content-num'>2.</p><p>报名前请认真阅读帖子，确认您已了解活动强度，难度，风险。认可活动原则</p>
                    </div>
                </div>
            </div>
            <div className='enroll-zysx mt20'>
                <div className='enroll-title enroll-title-f'>
                    <div>参加人</div>
                    <div onClick={() => this.xzlxr()}>选择</div>
                </div>
                <div className='enroll-content'>
                    {
                        this.state.lxr.length === 0
                        ?
                        <div style={{'justifyContent':'center','display':'flex'}}>还没有选择参加人信息</div>
                        :
                        this.state.lxr.map(function(item, index){
                            return <LxrItem key={index} data={item}/>
                        })
                    }
                </div>
            </div>

            <div className='enroll-zysx mt20'>
                <div className='enroll-title'>补充说明</div>
                <div className='enroll-content'>
                    <div className='enroll-bz'>
                        <div>小孩</div>
                        <div className='enroll-checkbox'>
                            <label>
                                有
                                <CheckboxItem checked={this.state.hasChildren === true?true:false}  key='1' onChange={() => this.checkboxChange(true)}></CheckboxItem>
                            </label>
                            <label>
                                没有
                                <CheckboxItem checked={this.state.hasChildren === false?true:false} key='0' onChange={() => this.checkboxChange(false)}></CheckboxItem>
                            </label>
                        </div>
                    </div>
                    <div className='enroll-bz'>
                        <div>备注</div>
                        <div>
                            <textarea onChange={() => this.checkRemarkField()} ref={remark => this.remark = remark} className='enroll-textarea'>{this.state.remark}</textarea>
                        </div>
                    </div>

                    <CheckboxItem className='enroll-checkbox-small' checked={this.state.mzsm} onChange={() => this.mzsmChange()} key='1' >
                        我已经仔细阅读注意事项以及<Link to='/mzsm'><span style={{color:'#ff9e00'}}>免责说明</span></Link>
                    </CheckboxItem>
                    {
                        this.state.mzsm === false
                        ?
                        <Button disabled className='enroll-button'>报名</Button>
                        :
                        <Button className='enroll-button' onClick={() => this.submit()}>报名</Button>
                    }
                </div>
            </div>
        </div>);
    }
}

export default Enroll;
